<template>
  <div class="wrap">
      <div class="title">更多推荐</div>    
        <bangumi-cover 
          v-for="item in list"
          :key="item.season_id"     
          :id="item.season_id"
          :title="item.title"
          :pic="item.new_ep.cover || item.cover"
          :play="item.stat.view"
          :follow="item.stat.danmaku"
          direction="horizontal"
        ></bangumi-cover>              
  </div>
</template>

<script>
import { toRefs, reactive, computed, watch } from 'vue'
import BangumiCover from '@/components/BangumiCover'
import { bangumiApi } from '@/api'
export default {
  name: 'BangumiRelated',
  components: {
    BangumiCover
  },
  props: {
    detailData: {
      type: Object
    }
  },
  setup(props) {
    const params = reactive({
      list: [],
      seasonId: computed(() => props.detailData?.ssId ?? '')
    })

    const getData = async () => {
      try {
          const { result } = await bangumiApi.getRelated({
              season_id: params.seasonId
          })
          if (result) {
            const { season } = result
            params.list = season.slice(0, 6)
          }
      } catch (error) {
          console.log(error)
      }
    }

    watch(() => params.seasonId, (newVal) => {
      if (newVal) {
        getData()
      }
    }, {
      immediate: true
    })

    return {
      ...toRefs(params)
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    padding: {
        left: 5px;
        right: 5px;
    };
  }
  .title{
    padding: {
        left: 5px;
        right: 5px;
    };
    height: 44px;
    line-height: 44px;
    font-size: 15px;
    font-weight: 700;
    color: $color-text-primary;
  }
</style>